<template>
  <el-card class="card" shadow="hover">
    <!-- 卡片内容区域 -->
    <div class="card-content">
      <!-- 卡片标题区域 -->
      <div class="card-header">
        <h3 class="family-name">{{ data.name }}</h3>
        <p class="create-time">{{ formatDate(data.createAt) }}</p>
      </div>

      <!-- 卡片数据统计区域 -->
      <el-descriptions :column="2" class="stats-container">
        <!-- 成员数量统计 -->
        <el-descriptions-item>
          <template #label>
            <div class="stat-label">
              <el-icon class="stat-icon">
                <el-User/>
              </el-icon>
              <span>成员数</span>
            </div>
          </template>
          <span class="stat-value">{{ data.memberNumber }}</span>
        </el-descriptions-item>

        <!-- 标签数量统计 -->
        <el-descriptions-item>
          <template #label>
            <div class="stat-label">
              <el-icon class="stat-icon">
                <el-Paperclip/>
              </el-icon>
              <span>标签数</span>
            </div>
          </template>
          <span class="stat-value">{{ data.tagNumber }}</span>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 卡片操作按钮 -->
      <div class="card-actions">
        <el-button
          class="view-btn"
          type="primary"
          @click.stop="$emit('openDetail',props.data.id)"
        >
          查看详情
        </el-button>
        <el-button
          class="edit-btn"
          type="warning"
          @click="$emit('edit',data)"
        >
          编辑
        </el-button>
        <el-button
          class="delete-btn"
          type="danger"
          plain
          @click.stop="handleDelete"
        >
          删除
        </el-button>
      </div>
    </div>
  </el-card>

</template>

<script setup lang="ts">


import {deleteFamilyById} from "@/api/family";
import type {FamilyCard } from "@/api/family/type.ts";
import {ElMessage, ElMessageBox} from "element-plus";

const emit = defineEmits(["refresh", 'edit', 'openDetail']);


const props = defineProps<{
  data: FamilyCard
}>();


// 格式化日期显示
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString();
};

/**
 * 处理删除操作
 */
function handleDelete() {
  ElMessageBox.confirm(
    `确定要删除家庭 "${props.data.name}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
      draggable: true,
      customClass: 'modern-message-box'
    }
  ).then(() => {
    deleteFamily();
  }).catch(() => {
  });
}

/**
 * 删除家庭
 */
async function deleteFamily() {
  try {
    await deleteFamilyById(props.data.id!);
    ElMessage.success("删除成功");
    // 刷新列表
    emit("refresh");
  } catch (error) {
    ElMessage.error('删除失败！');
    console.error(error);
  }
}
</script>

<style scoped lang="scss">
/* 卡片基础样式 */
.card {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--el-border-color-light);
  cursor: default;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    border-color: var(--el-color-primary-light-5);
  }

  /* 卡片内容区域 */
  .card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  /* 卡片头部样式 */
  .card-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--el-border-color-light);

    .family-name {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .create-time {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
  }

  /* 统计容器样式 */
  .stats-container {
    flex: 1;
    margin-bottom: 12px;

    /* 统计标签样式 */
    .stat-label {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: var(--el-text-color-secondary);

      .stat-icon {
        margin-right: 6px;
        font-size: 14px;
      }
    }

    /* 统计值样式 */
    .stat-value {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
  }

  /* 卡片操作按钮区域 */
  .card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;


    .edit-btn {
      background-color: var(--el-color-warning-light-8);
      color: var(--el-color-warning-dark-2);
      border: none;

      &:hover {
        background-color: var(--el-color-warning-light-5);
      }
    }

    .view-btn {
      background-color: #1F63FF;
      color: white;
      border: none;

      &:hover {
        background-color: var(--el-color-primary-light-3);
      }
    }

    .delete-btn {
      &:hover {
        border-color: var(--el-color-danger);
        color: var(--el-color-danger);
      }
    }
  }
}

/* 对话框样式 */
:deep(.delete-confirm-dialog) {
  border-radius: 12px;

  .el-message-box__header {
    border-bottom: 1px solid var(--el-border-color-light);
  }

  .el-message-box__content {
    padding: 20px;
  }

  .el-message-box__btns {
    padding: 16px;
    border-top: 1px solid var(--el-border-color-light);
  }
}
</style>
